<template>
  <div class="my-competition column">
    <div class="title row">
      <h3>我的竞赛</h3>
      <span class="tip font14"
        >共有<span class="blue font14">{{compList.length}}</span>个项目</span
      >
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="first">
        <span slot="label" class="font16">全部</span>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label" class="font16">比赛中</span>
      </el-tab-pane>
      <el-tab-pane name="third">
        <span slot="label" class="font16">已结束</span>
      </el-tab-pane>
    </el-tabs>
    <div>
      <el-empty
        v-if="compList.length == 0"
        class="non-data"
        description="暂无数据"
      ></el-empty>
      <CompCard
        v-else
        :compList="compList"
        @typeset="typeset"
      ></CompCard>
    </div>

    <!-- 生成商业计划书 -->
    <el-dialog
      :title="'智能排版'"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form
        ref="typeSetting"
        :model="typeSetting"
        label-position="left"
        :rules="typeRules"
      >
        <el-form-item
          label="项目简介"
          :label-width="formLabelWidth"
          prop="introduction"
        >
          <el-input
            type="textarea"
            :rows="2"
            maxlength="400"
            show-word-limit
            v-model="typeSetting.introduction"
            placeholder="请填写项目简介"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="市场需求分析"
          :label-width="formLabelWidth"
          prop="innovation"
        >
          <el-input
            type="textarea"
            :rows="2"
            maxlength="400"
            show-word-limit
            v-model="typeSetting.innovation"
            placeholder="请填写市场需求分析"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="现有条件"
          :label-width="formLabelWidth"
          prop="condition"
        >
          <el-input
            type="textarea"
            :rows="2"
            maxlength="400"
            show-word-limit
            v-model="typeSetting.condition"
            placeholder="请填写现有条件"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="技术路线"
          :label-width="formLabelWidth"
          prop="technology"
        >
          <el-input
            type="textarea"
            :rows="2"
            maxlength="400"
            show-word-limit
            v-model="typeSetting.technology"
            placeholder="请填写技术路线"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="研究进度"
          :label-width="formLabelWidth"
          prop="progress"
        >
          <el-input
            type="textarea"
            :rows="2"
            maxlength="400"
            show-word-limit
            v-model="typeSetting.progress"
            placeholder="请填写研究进度"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="研究成果"
          :label-width="formLabelWidth"
          prop="result"
        >
          <el-input
            type="textarea"
            :rows="2"
            maxlength="400"
            show-word-limit
            v-model="typeSetting.result"
            placeholder="请填写研究成果"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="经费预算"
          :label-width="formLabelWidth"
          prop="budget"
        >
          <el-input
            type="textarea"
            :rows="2"
            maxlength="400"
            show-word-limit
            v-model="typeSetting.budget"
            placeholder="请填写经费预算"
          ></el-input>
        </el-form-item>
        <el-form-item label="制作平台" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="1"
            maxlength="100"
            show-word-limit
            v-model="typeSetting.proPlatform"
            placeholder="请填写制作平台"
          ></el-input>
        </el-form-item>
        <el-form-item label="运行平台" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="1"
            maxlength="100"
            show-word-limit
            v-model="typeSetting.runPlatform"
            placeholder="请填写运行平台"
          ></el-input>
        </el-form-item>
        <el-form-item label="制作工具" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="1"
            maxlength="100"
            show-word-limit
            v-model="typeSetting.tools"
            placeholder="请填写制作工具"
          ></el-input>
        </el-form-item>
        <el-form-item label="结束语" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="1"
            maxlength="100"
            show-word-limit
            v-model="typeSetting.remark"
            placeholder=""
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit('typeSetting')"
          >提 交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import compApi from "@/api/competition";
import CompCard from "@/components/user/myComp/CompCard";
export default {
  name: "myCompetition",
  components: {
    CompCard,
  },
  data() {
    return {
      activeName: "first",
      //团队列表
      compList: [],

      //对话框
      currentItem: null,
      dialogFormVisible: false,
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      typeSetting: {
        id: null,
        introduction: "",
        innovation: "",
        condition: "",
        technology: "",
        progress: "",
        result: "",
        budget: "",
        // 非必须
        proPlatform: "",
        runPlatform: "",
        tools: "",
        remark: "",
      },
      typeRules: {
        introduction: [
          { required: true, message: "不得为空，请输入", trigger: "blur" },
        ],
        innovation: [
          { required: true, message: "不得为空，请输入", trigger: "blur" },
        ],
        condition: [
          { required: true, message: "不得为空，请输入", trigger: "blur" },
        ],
        technology: [
          { required: true, message: "不得为空，请输入", trigger: "blur" },
        ],
        progress: [
          { required: true, message: "不得为空，请输入", trigger: "blur" },
        ],
        result: [
          { required: true, message: "不得为空，请输入", trigger: "blur" },
        ],
        budget: [
          { required: true, message: "不得为空，请输入", trigger: "blur" },
        ],
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    console.log("我的竞赛页面创建成功！");
    this.getCompList();
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
  },
  methods: {
    // 获取数据
    getCompList() {
      var formData = new FormData();
      formData.append("userId", this.userInfo.userId);
      compApi.getCompByUser(formData).then((res) => {
        var data = res.data.data;
        this.compList = data;
        console.log("获取数据", data);
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 查看商业计划书
    typeset(data) {
      console.log("编辑内容为：", data);
      this.currentItem = data;
      this.dialogFormVisible = true;
      this.resetForm("ruleForm");
    },
    // 生成计划书
    resetForm(formName) {
      this.typeSetting = {
        id: null,
        introduction: "",
        innovation: "",
        condition: "",
        technology: "",
        progress: "",
        result: "",
        budget: "",
        // 非必须
        proPlatform: "",
        runPlatform: "",
        tools: "",
        remark: "",
      };
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var formData = new FormData();
          formData.append("introduction", this.typeSetting.introduction);
          formData.append("innovation", this.typeSetting.innovation);
          formData.append("condition", this.typeSetting.condition);
          formData.append("technology", this.typeSetting.technology);
          formData.append("progress", this.typeSetting.progress);
          formData.append("result", this.typeSetting.result);
          formData.append("budget", this.typeSetting.budget);
          formData.append("proPlatform", this.typeSetting.proPlatform);
          formData.append("runPlatform", this.typeSetting.runPlatform);
          formData.append("tools", this.typeSetting.tools);
          formData.append("remark", this.typeSetting.remark);
          // 非展示信息
          formData.append("sponsor", this.currentItem.sponsor);
          formData.append("schoolName", this.currentItem.regSchoolName);
          formData.append("groupId", this.currentItem.groupId);
          formData.append("compName", this.currentItem.compName);
          formData.append("category", this.currentItem.category);
          formData.append("groupName", this.currentItem.groupName);
          formData.append("tempUrl", this.currentItem.tempUrl);
          formData.append("teacherName", this.currentItem.teacherName);
          var teammates = "";
          var i = 0;
          var length = this.currentItem.registrations.length;
          this.currentItem.registrations.forEach((element) => {
            if (i == length - 1) {
              teammates += element.userName;
            } else {
              teammates += element.userName + ",";
            }
            i++;
          });
          formData.append("teammates", teammates);
          if (this.typeSetting.id == null) {
            compApi.typeSetting(formData).then((res) => {
              this.$message({
                type: "success",
                message: "文件生成成功!",
              });
              this.resetForm(formName);
              this.dialogFormVisible = false;
              window.open(res.data.data, "_blank");
              this.getCompList();
            });
          } else {
            // formData.append("groupId", this.typeSetting.id);
            // compApi.updateGroup(formData).then((res) => {
            //   this.$message({
            //     type: "success",
            //     message: "编辑成功!",
            //   });
            //   var data = res.data.data;
            //   this.groupList = data;
            //   this.dialogFormVisible = false;
            //   // console.log("编辑成功",data)
            // });
          }
          this.getGroupList();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.closeDialog("typeSetting");
          done();
        })
        .catch((_) => {});
    },
    closeDialog(formName) {
      this.resetForm(formName);
      this.dialogFormVisible = false;
    },
  },
};
</script>

<style scoped>
.my-competition {
  width: 1000px;
  box-sizing: border-box;
  padding: 35px 0;
}
.my-competition .title {
  margin-bottom: 20px;
  align-items: center;
}
.my-competition .title h3 {
  color: #343739;
  font-size: 24px;
  display: inline-block;
  margin: 0 15px 0 0;
  font-weight: normal;
  vertical-align: middle;
}
.my-competition .title .tip {
  color: #abb0b6;
  vertical-align: middle;
  display: inline-block;
}
.non-data {
  padding-top: 100px;
}
</style>